<template>
  <div class="banner-image">
    <el-row>
      <el-col :span="24" v-if="images.length>1">
        <div class="carousel">
          <el-carousel :interval="3000" indicator-position="none">
            <el-carousel-item v-for="(i,j) in images" :key="j">
              <el-image style="width:100%;height:100%;" :src="i" fit="cover"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      <el-col :span="24" v-if="images.length==1">
        <div class="image">
          <img :src="images[0]" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  props: ['images']
}
</script>

<style lang="less" scope>
.banner-image {
  .image {
    overflow: hidden;
    img {
      width: 130%;
    }
  }
}
</style>
